﻿<!doctype html>
<html lang="en">

	<head>
		<!-- Meta -->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">

		<!-- favicon -->
		<link rel="icon" sizes="16x16" href="assets/img/favicon1.ico">

		<!-- Title -->
		<title> ASLife 生活分享平台 </title>

		<!-- Font Google -->
		<link href="https://fonts.googleapis.com/css?family=Muli:300,400,500,600,700,800,900&display=swap"
			rel="stylesheet">

		<!-- CSS Plugins -->
		<link rel="stylesheet" href="assets/css/all.css">
		<link rel="stylesheet" href="assets/css/elegant-font-icons.css">
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" href="assets/css/owl.carousel.css">

		<!-- main style -->
		<link rel="stylesheet" href="assets/css/style.css">

	</head>

	<body>
		<!--loading -->
		<div class="loading">
			<div class="circle"></div>
		</div>
		<!--/-->

		<!-- Navigation-->
		<nav class="navbar navbar-expand-lg fixed-top">
			<div class="container-fluid">
				<!--logo-->
				<div class="logo">
					<a href="index.html">
						<img src="assets/img/aslife-logo.png" alt="">
					</a>
				</div>
				<!--/-->

				<!--navbar-collapse-->
				<div class="collapse navbar-collapse" id="main_nav">
					<ul class="navbar-nav ml-auto mr-auto">
						<li class="nav-item">
							<a class="nav-link " href="index.html"> 首页 </a>

						</li>

						<li class="nav-item ">
							<a class="nav-link " href="find.html"> 发现 </a>

						</li>


						<li class="nav-item">
							<a class="nav-link" href="about.html"> About </a>
						</li>
						<li class="nav-item">
							<a class="nav-link active" href="contact.html"> 发表 </a>
						</li>
						
					</ul>
				</div>
				<!--/-->

				<!--navbar-right-->
				<div class="navbar-right ml-auto">
					<div class="social-icones">
						<ul class="list-inline">



							<a href="login.html">
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
									class="bi bi-person-circle" viewBox="0 0 16 16">
									<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
									<path fill-rule="evenodd"
										d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
								</svg>
							</a>


							<a href="index.html">
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
									class="bi bi-chat-square-text-fill" viewBox="0 0 16 16">
									<path
										d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.5a1 1 0 0 0-.8.4l-1.9 2.533a1 1 0 0 1-1.6 0L5.3 12.4a1 1 0 0 0-.8-.4H2a2 2 0 0 1-2-2V2zm3.5 1a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5z" />
								</svg>
							</a>


						</ul>
					</div>

					<div class="search-icon">
						<i class="icon_search"></i>
					</div>

					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav"
						aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
				</div>
			</div>
		</nav>
		<!--/-->

		<!--contact us-->
		<section class="section pt-50">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-12">
						<div class="section-title">
							<h5>publish an article</h5>
						</div>
					</div>
				</div>

				<div class="row mb-20">
					<div class="col-lg-8 mt-30">
						<div class="contact">
							<!-- <div class="google-map">
								<iframe
									src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3104.5761533072873!2d-78.19644468515456!3d38.91080675375955!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b5c5dc680d0b2b%3A0x1e9ff0b6bb7a2f87!2s1000%20Proctor%20Ln%2C%20Front%20Royal%2C%20VA%2022630%2C%20%C3%89tats-Unis!5e0!3m2!1sfr!2sma!4v1578068093888!5m2!1sfr!2sma"
									allowfullscreen="">
								</iframe>
							</div> -->
							<form action="assets/php/mail.php" class="widget-form contact_form " method="POST"
								id="main_contact_form">
								<h6>快来发表你的文章吧:</h6>
								<div class="alert alert-success contact_msg" style="display: none" role="alert">
									Your article was sent successfully.
								</div>
								<div class="form-group">
									<label class="article_img">选择发表文章的图片</label>
									<input type="file" name="img" id="img" accept="image/jpg"  enctype="multipart/form-data"
										 required="required" src="">
								</div>
								<div class="form-group">
									<input type="text" name="uid" id="uid" class="form-control"
										placeholder="名字" required="required">
								</div>

								<div class="form-group">
									<input type="text" name="title" id="title" class="form-control"
										placeholder="文章标题" required="required">
								</div>

								<div class="form-group">
									<textarea name="text" id="text" cols="30" rows="5" class="form-control"
										placeholder="文章内容" required="required"></textarea>
								</div>

								<button type="submit" name="submit" class="btn-custom">Publish An Article</button>
							</form>
						</div>
					</div>
					
					
					<div class="col-lg-4 max-width">
						<!--widget-latest-posts-->
						<div class="widget ">
							<div class="section-title">
								<h5>前五热门文章</h5>
							</div>
							<ul class="widget-latest-posts" id="hot_article">
								<!-- <li class="last-post">
									<div class="image">
										<a href="post-default.html">
											<img src="assets/img/latest/1.jpg" alt="...">
										</a>
									</div>
									<div class="nb">1</div>
									<div class="content">
										<p>
											<a href="post-default.html">5 Things I Wish I Knew Before Traveling to
												Malaysia</a>
										</p>
										<small>
											<span class="icon_clock_alt"></span> January 15, 2021</small>
									</div>
								</li>
								<li class="last-post">
									<div class="image">
										<a href="post-default.html">
											<img src="assets/img/latest/2.jpg" alt="...">
										</a>
									</div>
									<div class="nb">2</div>
									<div class="content">
										<p>
											<a href="post-default.html">Everything you need to know about visiting the
												Amazon.</a>
										</p>
										<small>
											<span class="icon_clock_alt"></span> January 15, 2021</small>
									</div>
								</li>
								<li class="last-post">
									<div class="image">
										<a href="post-default.html">
											<img src="assets/img/latest/3.jpg" alt="...">
										</a>
									</div>
									<div class="nb">3</div>
									<div class="content">
										<p>
											<a href="post-default.html">How to spend interesting vacation after hard
												work?</a>
										</p>
										<small>
											<span class="icon_clock_alt"></span> January 15, 2021</small>
									</div>
								</li>
								<li class="last-post">
									<div class="image">
										<a href="post-default.html">
											<img src="assets/img/latest/4.jpg" alt="...">
										</a>
									</div>
									<div class="nb">4</div>
									<div class="content">
										<p>
											<a href="post-default.html">10 Best and Most Beautiful Places to Visit in
												Italy</a>
										</p>
										<small>
											<span class="icon_clock_alt"></span> January 15, 2021</small>
									</div>
								</li> -->
							</ul>
						</div>
						<!--/-->

					
					</div>
				</div>

			</div>
		</section>

		
		<!--Search-->
		<div class="search">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-10 offset-sm-1 text-center">
						<button type="button" class="close">
							<i class="icon_close"></i>
						</button>
						<form class="search-form" action="#">
							<input type="search" value="" placeholder="What are you looking for?">
							<button type="submit" class="search-btn">search</button>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!--/-->
		
	<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
	<script src="assets/js/script.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
		
				//初始加载调用一次
				getData();
		
				function getData() {
		
					//jQuery封装的方法
					$.ajax({
		
						url: "http://localhost:8080/api/hotArticle/list",
						async: true,
						dataType: "json",
						type: "get",
						// 请求成功后，服务端正常响应的回调函数
						success: function(responsedata) {
		
							let list = responsedata.rows;
							for (let s of list) {
								let str = `
								<li class="last-post">
									<div class="image">
										<a href="post-default.html">
											<img src="https://as-soul.oss-cn-hangzhou.aliyuncs.com/article-img/${s.img}" alt="...">
										</a>
									</div>
									<div class="nb">${s.goods}</div>
									<div class="content">
										<p>
											<a href="post-default.html">${s.title}</a>
										</p>
										<small>
											<span class=""></span>${s.text}</small>
										
									</div>
								</li>
					`;
								$("#hot_article").append(str);
							}
		
							// resolvepage();
						}
		
					});
				}
			});
		</script>
		
		


		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="assets/js/jquery-3.5.0.min.js"></script>
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- JS Plugins  -->
		<script src="assets/js/ajax-contact.js"></script>
		<script src="assets/js/owl.carousel.min.js"></script>
		<script src="assets/js/main.js"></script>


	</body>
</html>
